<template>
  <!--登录框弹出层-->
  <div id="log" v-show="$store.state.logBoxOpen">
    <!--登录框-->
    <div class="logbox" v-if="display.islog">
      <div class="qlog-head">
        <h3>账号登录</h3>
        <a href="#" @click="$store.commit('changeLogBoxOpen')"><i class="el-icon-close"></i></a>
      </div>
      <div class="qlog-form">
        <el-input v-model="form.name" placeholder="邮箱/手机号（国际号码加区号）"></el-input>
        <el-input v-model="form.pw" placeholder="请输入密码" type="password"></el-input>
        <el-button type="primary" @click="login">登录</el-button>
      </div>
      <div class="qlog-foot">
        <span @click="display.islog=!display.islog">没有账号？点击前往注册</span>
        <p>注册登录即表示同意
          <a href="https://juejin.cn/terms">用户协议</a>、
          <a href="https://juejin.cn/privacy">隐私政策</a></p>
      </div>
    </div>
    <!--注册框-->
<<<<<<< HEAD
    <div class="logbox" v-if="!display.islog" style="height: 370px">
=======
<<<<<<< HEAD
    <div class="logbox" v-if="!display.islog" style="height: 370px">
=======
    <div class="logbox" v-if="!display.islog" style="height: 320px">
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      <div class="qlog-head">
        <h3>注册账号</h3>
        <a href="#" @click="$store.commit('changeLogBoxOpen')"><i class="el-icon-close"></i></a>
      </div>
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      <div class="qlog-form" style="height: 250px">
        <el-input v-model="regist.nickname" placeholder="昵称"></el-input>
        <el-input v-model="regist.name" placeholder="账号名称（用于登录）"></el-input>
        <el-input v-model="regist.pw" placeholder="请输入密码" type="password"></el-input>
        <el-input v-model="regist.rpw" placeholder="请确认密码" type="password"></el-input>
<<<<<<< HEAD
=======
=======
      <div class="qlog-form" style="height: 200px">
        <el-input v-model="regist.name" placeholder="邮箱/手机号（国际号码加区号）"></el-input>
        <el-input v-model="regist.pw" placeholder="请输入密码" type="password"></el-input>
        <el-input v-model="regist.pw" placeholder="请确认密码" type="password"></el-input>
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
        <el-button type="primary" @click="registerAccount">注册</el-button>
      </div>
      <div class="qlog-foot">
        <span @click="display.islog=!display.islog">已有账号？点击返回登录</span>
        <p>注册登录即表示同意
          <a href="https://juejin.cn/terms">用户协议</a>、
          <a href="https://juejin.cn/privacy">隐私政策</a></p>
      </div>
    </div>
  </div>
</template>

<script>
import {allUse} from "../requests/apis";

export default {
  name: "log",
  data(){
    return{
      display: {
        islog: true
      },
      form: {
        name: '',
        pw: ''
      },
      regist:{
<<<<<<< HEAD
        nickname:'',
=======
<<<<<<< HEAD
        nickname:'',
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
        name:'',
        pw:'',
        rpw:''
      }
    }
  },
  methods:{
    registerAccount(){
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      if(this.regist.pw!==this.regist.rpw){
        this.$message({
          type:'error',
          message:'两次密码输入不一致'
        })
      }else {
        allUse('/api/register','post',{
          name:this.regist.name,
          pw:this.regist.pw,
          nick_name:this.regist.nickname
        }).then(res=>{
          if(res.data.code!=2000){
            this.$message({
              type:'error',
              message:res.data.msg
            })
          }else{
            sessionStorage.setItem('userdata',JSON.stringify({
              ud:res.data.data.user_id,
              name:this.regist.nickname,
              token:res.data.data.token,
              status:1
            }))
            this.$store.state.logState = true
            this.$message({
              type:'success',
              message:'注册成功'
            })
            this.$router.go(0)
          }
        }).catch(err=>{
          console.log(err)
        })
      }
<<<<<<< HEAD

=======
=======
      allUse('/api/register','post',{
        name:this.regist.name,
        pw:this.regist.pw
      }).then(res=>{
       if(res.data.code!=2000){
         this.$message({
           type:'error',
           message:res.data.msg
         })
       }else{
         console.log(res)
          sessionStorage.setItem('userdata',JSON.stringify({
            ud:res.data.data.user_id,
            name:this.regist.name,
            token:res.data.data.token,
            status:1
          }))
         this.$store.state.logState = true
       }
      }).catch(err=>{
        console.log(err)
      })
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    },
    login(){
      allUse('/api/login','post',{
        name:this.form.name,
        pw:this.form.pw
      }).then(res=>{
        if(res.data.code!=2000){
          this.$message({
            type:'error',
            message:res.data.msg
          })
        }else{
          console.log(res)
          sessionStorage.setItem('userdata',JSON.stringify({
            ud:res.data.data.user_id,
<<<<<<< HEAD
            name:res.data.data.nick_name || res.data.data.user_account,
=======
<<<<<<< HEAD
            name:res.data.data.nick_name || res.data.data.user_account,
=======
            name:res.data.data.user_account,
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
            token:res.data.data.token,
            status:1
          }))
          this.$store.commit('changeLogBoxOpen')
          this.$message({
            type:'success',
            message:`登录成功，欢迎您 ${res.data.data.user_account}`
          })
          this.$router.go(0)
        }
      }).catch(err=>{
        console.log(err)
      })
    }
  }
}
</script>

<style>
#log {
  width: 100vw;
  height: 100vh;
  background-color: #0000009a;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
}

.logbox {
  width: 295px;
  height: 285px;
  background-color: #fff;
  position: fixed;
  margin: auto;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: 5px;
  padding: 25px;
}

.qlog-head {
  display: flex;
  justify-content: space-between;
}

.qlog-head a {
  font-size: 24px;
}

.qlog-form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 145px;
}

.qlog-foot {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}
</style>